<?php

namespace App\Controllers;

use App\NaiveUI\Button;
use App\NaiveUI\Grid;
use LowCode\Block;
use LowCode\Html;
use LowCode\Naive;
use LowCode\Naive\QrCode;
use LowCode\Page;
use LowCode\Response;
use LowCode\Store;
use LowCode\Support\JsDs;
use LowCode\Support\JsExp;
use LowCode\UI;

class Home
{
    public function index()
    {
        Store::make()->state("www","哈哈哈哈");
        $block = Block::make("HomeBlock", function (Block $block){
            $block->states(["test"=>222,"msg"=>"红红火火恍恍惚惚看看打卡","items"=>[1,2,3,4]]);
            $block->method("onTest", "()=>{console.log('测试1',this);}");
//    $block->addWatch(JsExp::make("()=>state.test"), JsFn::make("()=>{console.log('监听',this)}"));
            $block->mounted("()=>{console.log('挂载完成',this);}");
            $block->prop("test", "Number", false, 0);
//    $block->dataSource("test2", JsDs::make("test2",uuid_create(),"api"));
//            $block->inject("appConfig", ["test"]);
            $block->inject("message", JsExp::make("window.\$message"));
            $title = Naive::title("控制台",3)->prefix();
            $tabs = Naive::tabs();
            $tabs->tab("测试",[
                Naive::rate(3),
                Naive::link("百度网站")->href("https://www.baidu.com"),
                Html::div([
                    Naive::image("https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"),
                    Naive::qrCode("红红火火恍恍惚惚哈哈哈哈")->ref("qrcode"),
                    Naive::button("下载")->onClick(QrCode::download("qrcode")),
                    Naive::divider(),
                    Naive::buttonGroup([
                        UI::routerLink([
                            "name"=>"Home",
                            "query"=>["test"=>1]
                        ])->children(Naive::button("跳转参数id=1")->warning()),
                        UI::routerLink([
                            "name"=>"Home",
                            "query"=>["test"=>2]
                        ])->children(Naive::button("跳转参数id=2")->info()),
                        Naive::button("查询Route")->onClick("()=>{console.log(this.\$route)}")
                    ]),
                ])->class("my-3"),

                UI::node("RouterView"),
                UI::el()->tag("br"),
                Naive::divider(),
                UI::code(<<<PHP
\$a = 1;
function test() {
    echo 123456;
}
\$b = 1;
PHP)->componentName("SkCode"),
            ]);
            $tabs->tab("按钮",Button::example());
            $tabs->tab("栅格布局",Grid::example());
            $tabs->tab("HTML",[
                Html::div("0顶顶顶顶孤寡孤寡孤寡顶顶顶顶.0")->class("bg-red text-white m-3 p-2"),
                Html::span("和荷兰的你"),
            ]);
            $tabs->tab("UI",[
                UI::fromUrl("/index.php/home/component", "TestComponent"),
                UI::fromSchema("NewBlock")->register($block->id, function (Block $block){
                    $block->nodes([Html::div([
                        Html::div("新板块"),
                        Naive::button("新板块按钮")->secondary()->error(),
                    ])]);
                }),
                UI::node("NButtonGroup")->children([
                    Naive::button("哈哈哈哈")->primary(),
                    UI::routerLink("/analytics")->children(Naive::button("跳转分析页")->warning()),
                    UI::routerLink("/naive/index")->children(Naive::button("跳转naive例子")->info()),
                ]),
            ]);
            $tabs->tab("表单",[
                Naive::input()->class("my-2"),
            ]);

            $block->nodes([
//                UI::fromPlugin([
//                    url("assets/home.js")
//                ],"HomeTest"),
                Naive::card($title,$tabs)->class("m-3")
            ]);
            $block->addDataSourceFromApi("test","/test");
//            $api = JsApi::make("test","/test");
//            $block->addApi($api)->dataSource("test",JsDs::make($api->id));

        });
        $page = Page::make($block);
//        Store::make()->addDependencies()
//        $page->addDependencies(Dependencies::make("naive","2.39.0","naive",[
//            "https://unpkg.com/naive-ui@2.39.0/dist/index.js"
//        ])->required(true)->enabled(true));
//        $page->addDependencies("vue3-sfc-loader","",[
//
//        ]);
//        $page->addDependencies(Dependencies::make("vue3-sfc-loader","latest","vue3-sfc-loader",[
//            "https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js"
//        ])->required(true)->enabled(true));
//        $page->addDependencies(Dependencies::make("ElementPlus","2.8.2","ElButton",[
//            "https://unpkg.com/element-plus@2.8.2/dist/index.full.js",
//            "https://unpkg.com/element-plus@2.8.2/dist/index.css",
//        ])->required(true)->enabled(true));
//    \Illuminate\Support\Benchmark::dd([98
//        "page"=>fn()=> Page::make($block)
//    ]);
//        https://unpkg.com/naive-ui@2.39.0/dist/index.js
        return response()->result($page);
    }

    public function component()
    {
        $block = Block::make("block",function (Block $block){
            $el = Html::div("自定义远程组件");
            $block->created(<<<JS
()=>{console.log(\$message)}
JS);
            $block->nodes([$el]);
            $block->dataSource("test2", JsDs::make("test2"));
        });
        return response()->result($block);
        return json_encode($block, JSON_UNESCAPED_UNICODE);
    }
}